<template>
  <div>
    <!-- {{ props.satelliteId }} -->
    <div style="display: flex; margin-bottom: 10px">
      <a-space style="flex: 1">
        <a-select
          placeholder="请选择卫星"
          style="width: 200px; display: none"
          allow-clear
          v-model="data.satelliteId"
          @change="getList"
        >
          <a-option
            v-for="item in data.satelitesList"
            :key="item.satelliteId"
            :value="item.satelliteId"
            :label="item.satelliteName"
          ></a-option>
        </a-select>
      </a-space>
      <a-space>
        <a-button type="primary" @click="batchSubscribe(1)"
          ><template #icon><IconList /></template>批量订阅</a-button
        >
        <a-button @click="batchSubscribe(2)"
          ><template #icon><IconUndo /></template>批量取消订阅</a-button
        >
      </a-space>
    </div>
    <a-spin :loading="data.loading">
      <a-table
        :data="data.tableData"
        :columns="data.columns"
        :pagination="false"
        row-key="id"
        :row-selection="rowSelection"
        v-model:selectedKeys="data.selectedKeys"
      >
        <template #index="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
        <!-- <template #paramName="{ record }">
          {{ record?.paramsList[0]?.paramName }}
        </template> -->
        <template #action="{ record }">
          <!-- <div class="btnBox">
            <div class="lookBtn" @click="toggleSubscription(record)">
              {{ record.subscribed ? "取消订阅" : "订阅" }}
            </div>
          </div> -->
          <a-space>
            <a-button type="text" size="small" @click="toggleSubscription(record)">
              <template #icon>
                <template v-if="!record.subScribeStatus">
                  <IconSubscribe />
                </template>
                <template v-else>
                  <IconUndo />
                </template>
              </template>
              {{ record.subScribeStatus ? '取消订阅' : '订阅' }}
            </a-button>
            <!-- <a-button type="text" size="small" @click="bindHandle(record)">
              绑定
            </a-button> -->
          </a-space>
        </template>
      </a-table>
      <a-pagination
        :total="data.pagination.total"
        :current="data.pagination.pageStart"
        :page-size="data.pagination.pageLength"
        @change="handlePageChange"
        @page-size-change="handlePageSizeChange"
        style="float: right; margin-right: 20px; margin-top: 20px; justify-content: end"
      ></a-pagination>
    </a-spin>
    <a-modal title="绑定算法" v-model:visible="data.bindVisible" width="600px">
      <a-form model="data.form">
        <a-form-item label="配置名称">
          <a-select v-model="data.form.configName">
            <a-option>配置1</a-option>
            <a-option>配置2</a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="参数名称">
          <a-select v-model="data.form.paramName">
            <a-option>参数1</a-option>
            <a-option>参数2</a-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { Message } from '@arco-design/web-vue'
import { reactive, onMounted, watch } from 'vue'
import { apiHome } from '@/api'
import { Api } from '@/api/subscription'
import * as timeSeriesApi from './api/index'
import Template from '@/views/modelInference/template.vue'
const props = defineProps({
  satelliteId: {
    type: String,
    default: ''
  },
  satelliteCode: {
    type: String,
    default: ''
  }
})

const data = reactive({
  loading: false,
  tableData: [],
  satelitesList: [],
  columns: [
    {
      title: '序号',
      slotName: 'index',
      width: 60,
      customRender: ({ index }) => {
        return index + 1 + (data.pagination.pageStart - 1) * data.pagination.pageLength
      }
    },
    { title: '卫星名称', dataIndex: 'satName' },
    { title: '参数名称', dataIndex: 'paramName' },
    {
      title: '参数识别码',
      dataIndex: 'paramCode'
    },
    // {
    //   title: "报警等级",
    //   dataIndex: "alarmLevel",
    //   render: ({ record }) => {
    //     return record.alarmLevel + "级";
    //   },
    // },
    {
      title: '状态',
      dataIndex: 'subScribeStatus',
      render: ({ record }) => {
        return record.subScribeStatus ? '已订阅' : '未订阅'
      }
    },
    // { title: "算法名称", dataIndex: "name" },
    // { title: "卫星名称", dataIndex: "satName" },
    // { title: "参数名称", dataIndex: "paramName", slotName: "paramName" },
    // {
    //   title: "参数识别码",
    //   dataIndex: "paramCode",
    //   // render: ({ record }) => {
    //   //   return record?.paramsList[0]?.paramCode;
    //   // },
    // },
    { title: '创建时间', dataIndex: 'createDate' },
    { title: '操作', slotName: 'action', width: 150 }
  ],
  satelliteId: null,
  selectedKeys: [],
  pagination: {
    total: 0,
    pageStart: 1,
    pageLength: 10
  },
  bindVisible: false,
  form: {
    configName: null,
    paramName: null
  }
})

watch(
  () => props.satelliteId,
  (val) => {
    getList()
  }
)
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false
})

const toggleSubscription = (record) => {
  // record.subscribed = !record.subscribed;
  const params = {
    parameterList: [
      {
        paramCode: record.paramCode,
        paramId: record.paramId,
        paramName: record.paramName
      }
    ],
    requestType: record.subScribeStatus ? 2 : 1, // 1订阅 2取消订阅
    satId: props.satelliteCode,
    systemCode: 'timeSeries'
  }
  Api.subscribe(params).then((res) => {
    if (res.code === 200) {
      Message.success('订阅成功')
      getList()
    }
  })
}

const bindHandle = (record) => {
  console.log(record)
  data.bindVisible = true
}

const batchSubscribe = (type) => {
  if (data.selectedKeys.length === 0) {
    Message.warning('请先选择数据')
    return false
  }
  const result = data.tableData.filter((obj) => data.selectedKeys.includes(obj.id))
  // console.log(result, "result");
  const parameterList = result.map((item) => {
    return {
      paramCode: item.paramCode,
      paramId: item.paramId,
      paramName: item.paramName
    }
  })
  const params = {
    parameterList,
    requestType: type, // 1订阅 2取消订阅
    satId: props.satelliteCode,
    systemCode: 'timeSeries'
  }
  Api.subscribe(params).then((res) => {
    if (res.code === 200) {
      Message.success(type === 1 ? '订阅成功' : '取消订阅成功')
      getList()
    }
  })
}

const cancelSubscribe = () => {
  if (data.selectedKeys.length === 0) {
    Message.warning('请先选择算法')
    return false
  }
  data.tableData.forEach((record) => {
    data.selectedKeys.forEach((key) => {
      if (record.id === key) {
        record.subscribed = false
      }
    })
  })
}

const handlePageChange = (page) => {
  data.pagination.pageStart = page
  getList()
}

const handlePageSizeChange = (size) => {
  data.pagination.pageLength = size
  getList()
}

const getList = () => {
  data.loading = true
  timeSeriesApi
    .getRelationBindPage(Object.assign(data.pagination, { satId: props.satelliteId }))
    .then((res) => {
      if (res.code === 200) {
        data.loading = false
        data.tableData = res.data.list
        data.pagination.total = +res.data.total
      } else {
        data.loading = false
      }
    })
    .finally(() => {
      data.loading = false
    })
}

const getsatelitesList = () => {
  apiHome.satellites().then((res) => {
    if (res.code === 200) {
      data.satelitesList = res.data
    }
  })
}
onMounted(() => {
  getList()
  // getsatelitesList();
})
</script>

<style scoped>
:deep(.arco-btn-size-small) {
  padding: 5px;
}
</style>
